<!--
 * @Author: your name
 * @Date: 2021-11-22 08:44:50
 * @LastEditTime: 2021-12-03 10:31:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\admin\src\views\articleDetail\index.vue
-->
<template>
  <div class="box">
    <div class="handler-box">
      <div class="left-handler">
        <el-popconfirm
          title="确认关闭？如果有内容变更，请先保存。"
          @confirm="isExit()"
        >
          <button class="close-btn" slot="reference" type="text">X</button>
        </el-popconfirm>

        <input v-model="value" placeholder="请输入文章标题" />
      </div>
      <div class="right-handler">
        <el-button type="primary" @click="pubArticle">发布</el-button>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i
              class="iconfont icon-gengduo1"
              style="color: #66b1ff; margin-left: 20px"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="true">查看</el-dropdown-item>
            <el-dropdown-item @click.native="visible = true"
              >设置</el-dropdown-item
            >
            <el-dropdown-item @click.native="dftArticle"
              >保存草稿</el-dropdown-item
            >
            <el-dropdown-item :disabled="true">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <a-drawer title="文章设置" width="520" :visible="visible" @close="onClose">
      <div class="handler-drawer">
        <a-form
          id="components-form-demo-validate-other"
          :form="info"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 19 }"
        >
          <a-form-item label="文章摘要 " :colon="false">
            <a-textarea
              :rows="4"
              style="resize: none"
              v-model="info.abstract"
            />
          </a-form-item>
          <a-form-item label="访问密码 " :colon="false">
            <a-input-password
              placeholder="输入后查看需要密码"
              v-model="info.visit_pwd"
            />
          </a-form-item>
          <a-form-item label="付费查看 " :colon="false">
            <a-input-password
              placeholder="输入后需要支付的费用"
              v-model="info.pay_check"
            />
          </a-form-item>
          <a-form-item label="开启评论 " :colon="false">
            <a-switch v-model="info.is_comment" />
          </a-form-item>
          <a-form-item label="首页推荐 " :colon="false">
            <a-switch v-model="info.focus" />
          </a-form-item>
          <!-- ***************************** -->
          <a-form-item label="选择分类" :colon="false">
            <a-select
              style="width: 100%"
              @change="handleChange"
              v-model="classify"
            >
              <a-select-option
                v-for="item in classifyList"
                :key="item.id"
                :value="item.text"
              >
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="选择标签" :colon="false">
            <a-select
              style="width: 100%"
              @change="handleChangeTag"
              v-model="tag"
            >
              <a-select-option
                v-for="item in tagList"
                :key="item.id"
                :value="item.text"
              >
                {{ item.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="文章封面" :colon="false">
            <img
              :src="info.cover"
              alt=""
              v-if="info.cover"
              class="pre-img"
              @click="showChildrenDrawer"
            />
            <img
              v-else
              :src="noImg"
              class="pre-img"
              @click="showChildrenDrawer"
            />
          </a-form-item>
          <a-form-item label=" " :colon="false">
            <a-input v-model="info.cover" :disabled="true"></a-input>
          </a-form-item>
          <a-form-item label=" " :colon="false">
            <a-button @click="removeInfoCover">移除</a-button>
          </a-form-item>

          <!-- 二级抽屉 -->
          <a-drawer
            title="文件选择"
            width="800"
            :visible="childrenDrawer"
            @close="onChildrenDrawerClose"
          >
            <div class="box-card">
              <div class="input-box">
                <div class="title-input-box">
                  <p>文件名称:</p>
                  <a-input placeholder="请输入文件名称" v-model="title">
                  </a-input>
                </div>
                <div class="title-input-box">
                  <p>文件类型:</p>
                  <a-input placeholder="请输入文件类型" v-model="type">
                  </a-input>
                </div>
              </div>
              <div class="search-btn-box">
                <el-button type="primary" @click="searchFile">搜索</el-button>
                <el-button @click="result">重置</el-button>
              </div>
              <div class="upload-box">
                <el-upload
                  action
                  :http-request="handleUpload"
                  :before-upload="beforeUpload"
                >
                  <el-button>上传文件</el-button>
                </el-upload>
              </div>
            </div>
            <div class="main-card">
              <div
                style="width: 25%; max-width: 25%"
                v-for="item in fileList"
                :key="item.id"
                @click="valutionInfo(item)"
              >
                <a-card hoverable style="width: 95%">
                  <img
                    slot="cover"
                    alt="example"
                    :src="item.url"
                    style="width: 100%; height: 150px"
                  />
                  <a-card-meta :title="item.name">
                    <template slot="description"
                      >上传于{{ item.lastModified }}</template
                    >
                  </a-card-meta>
                </a-card>
              </div>
            </div>
            <a-card>
              <div class="pageination-box">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageIndex"
                  :page-sizes="[8, 12, 24, 36]"
                  layout="total, prev, pager, next, sizes"
                  :total="total"
                >
                </el-pagination>
              </div>
            </a-card>
          </a-drawer>

          <!-- 二级抽屉 -->
        </a-form>
      </div>
      <div
        :style="{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e8e8e8',
          padding: '10px 16px',
          textAlign: 'right',
          left: 0,
          background: '#fff',
          borderRadius: '0 0 4px 4px',
        }"
      >
        <a-button type="primary" @click="onClose">确认</a-button>
      </div>
    </a-drawer>
    <v-md-editor v-model="text" style="width: 100%; height: 100%"></v-md-editor>
  </div>
</template>

<script>
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { put, signatureUrl, getFileNameUUID, list } from "@/utils/oss.js";
import noImg from "../../assets/暂无.gif";
import api from "../../api";
export default {
  data() {
    return {
      value: "", //标题
      text: "", //富文本
      info: {
        abstract: "",
        classify: "",
        cover: "",
        focus: false,
        is_comment: false,
        pay_check: "",
        tag: "",
        visit_pwd: "",
      }, //详情数据
      state: 0,
      arrInfo: [], //操作
      visible: false, //抽屉
      childrenDrawer: false, //二级抽屉
      classifyList: [], //分类
      tagList: [], //标签
      tag: "", //标签--->绑定v-modol
      classify: "",
      noImg, //预览图片
      total: 0, //二级抽屉
      fileList: [], //oss数据
      pageSize: 8,
      pageIndex: 1,
      title: "", //搜索名称
      type: "", //搜索类型
    };
  },
  watch: {
    tag(val) {
      this.info.tag = val;
      this.info = { ...this.info };
    },
    classify(val) {
      this.info.classify = val;
      this.info = { ...this.info };
    },
  },
  methods: {
    isExit() {
      this.$router.push("/articleAdmin/allAdmin");
    },
    beforeUpload(file) {
      return true;
    },
    async handleUpload(option) {
      NProgress.start();
      // // 获取文件的后缀名
      var obj = option.file.name;
      var index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      // 生成的文件名，保留文件后缀名，进行拼接
      let objName = getFileNameUUID() + option.file.name;
      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      await put(`flieName/${objName}`, option.file).then((res) => {
        console.log(res);
        // 上传成功之后，转换真实的地址
        signatureUrl(`flieName/${objName}`).then((res) => {
          console.log(res);
        });
      });
      NProgress.done();
      await this.getOssFile();
      this.$message({
        type: "success",
        message: "上传成功",
      });
    },
    // //改每页条数时
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOssFile();
    },
    //改变页码时
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOssFile();
    },
    //获取oss数据
    async getOssFile() {
      //显示加载进度条--->提示用户加载进度
      NProgress.start();
      const res = await list();
      this.fileList = res.objects;
      //结束用户加载进度
      this.fileList.sort((a, b) => {
        return new Date(b.lastModified) - new Date(a.lastModified);
      });
      this.fileList = this.fileList.map((item) => {
        return {
          ...item,
          name: item.name.split("flieName/")[1],
          path: item.name,
          type: "image/" + item.name.split(".")[1],
        };
      });
      let newList = this.fileList;
      this.total = newList.length;
      if (this.title) {
        newList = newList.filter((item) => item.name.includes(this.title));
      }
      if (this.type) {
        newList = newList.filter((item) => item.type.includes(this.type));
      }
      this.fileList = newList.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageSize * this.pageIndex
      );
      this.total = newList.length;
      NProgress.done();
    },
    //搜索事件
    searchFile() {
      this.pageIndex = 1;
      this.getOssFile();
    },
    // //重置
    result() {
      this.type = "";
      this.title = "";
      this.pageSize = 8;
      this.pageIndex = 1;
      this.getOssFile();
    },
    //添加函数--->调用多次
    async addArticle() {
      return await api.addArticle({
        title: this.value,
        content: this.text,
        tag: this.tag,
        classify: this.classify,
        focus: this.info.focus,
        cover: this.info.cover,
        abstract: this.info.abstract,
        visit_pwd: this.info.visit_pwd,
        pay_check: this.info.pay_check,
        is_comment: this.info.is_comment,
        state: this.state,
      });
    },
    //发布
    async pubArticle() {
      if (this.value) {
        this.state = await 1;
        const res = await this.addArticle();
        if (res.success) {
          this.$message({
            type: "success",
            message: "文章已发布",
          });
        } else {
          this.$message({
            type: "warning",
            message: "意外的错误",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请输入文章标题",
        });
      }
    },
    //草稿
    async dftArticle() {
      if (this.value) {
        this.state = await 0;
        const res = await this.addArticle();
        if (res.success) {
          this.$message({
            type: "success",
            message: "文章已保存为草稿",
          });
        } else {
          this.$message({
            type: "warning",
            message: "意外的错误",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请输入文章标题",
        });
      }
    },
    async getClassifyList() {
      const res = await api.getClassifyList();
      if (res.success) {
        this.classifyList = res.data;
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    async getTagList() {
      const res = await api.getTagList();
      if (res.success) {
        this.tagList = res.data;
      } else {
        this.$message({
          type: "warning",
          message: "意外的错误",
        });
      }
    },
    //分类选择框改变
    handleChange(value) {
      this.info = { ...this.info, classify: value };
    },
    handleChangeTag(value) {
      this.info = { ...this.info, tag: value };
    },
    //一级抽屉打开
    showDrawer() {
      this.visible = true;
    },
    //一级抽屉关闭
    onClose() {
      this.visible = false;
    },
    //二级抽屉打开
    showChildrenDrawer() {
      this.childrenDrawer = true;
    },
    //二级抽屉关闭
    onChildrenDrawerClose() {
      this.childrenDrawer = false;
    },
    //赋值cover封面信息
    valutionInfo(data) {
      this.info = { ...this.info, cover: data.url };
      this.onChildrenDrawerClose();
    },
    //移除cover封面信息
    removeInfoCover() {
      this.info = { ...this.info, cover: "" };
    },
  },
  async created() {
    //获取分类列表
    this.getClassifyList();
    //获取标签
    this.getTagList();
    //获取oss数据
    this.getOssFile();
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
.handler-box {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .left-handler {
    display: flex;
    align-items: center;
  }
  .close-btn {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 20px;
    margin-right: 20px;
    background-color: #fff;
    outline: none;
    border: 1px solid #ccc;
    font-weight: bold;
  }
}
.left-handler {
  input {
    width: 300px;
    height: 35px;
    outline: none;
    border: none;
    border-bottom: 1px solid #0f91fc;
  }
}
.right-handler {
  .el-button {
    padding: 10px 16px;
  }
}
.pre-img {
  width: 100%;
  height: 150px;
  display: inline-block;
  padding: 20px 0;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
.box-card {
  .input-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
}
.input-box .title-input-box {
  display: flex;
  align-items: center;
  p {
    width: 95px;
  }
}
.search-btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.main-card {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  .ant-card {
    padding: 20px;
    border: none;
    margin: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.pageination-box {
  display: flex;
  justify-content: flex-end;
}
.info-box {
  font-size: 12px;
  margin: 15px 0;
  color: #000;
}
.copy-link {
  display: flex;
  margin-bottom: -30px;
  span {
    width: 55px;
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  p {
    width: 510px;
    flex-shrink: 0;
    border: 1px solid #ccc;
    padding: 5px;
  }
}
.upload-box {
  display: flex;
  justify-content: flex-end;
}
</style>
